<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <label style="margin-right: 5px">套餐名称:</label>
        <el-input v-model="name" placeholder="请输入套餐名称" style="width: 180px" />

        <label style="margin-left: 15px">套餐分类:</label>
        <el-select v-model="categoryId" placeholder="请选择" style="margin-left: 5px">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>

        <label style="margin-left: 15px">售卖状态:</label>
        <el-select v-model="status" placeholder="请选择" style="margin-left: 5px">
          <el-option
            v-for="item in saleStatusArr"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <el-button type="primary" style="margin-left: 25px" @click="pageQuery()">搜索</el-button>
       <div style="float: right">
        <el-button type="danger" @click="handleDelete('Batch')">批量删除</el-button>
        <el-button type="info" @click="handleAddSetMeal">新增套餐</el-button>
       </div>

      

     </div>
     <el-table :data="records" stripe class="tableBox" @selection-change="handleSelectionChange" >
      <el-table-column type="selection" width="25" />
      <el-table-column prop="name" label="套餐名称"/>
      <el-table-column label="图片">
         <template slot scope="scope">
           <el-image style="width: 80px; height: 40px; border: none" :src="scope.row.image"></el-image>
         </template>
      </el-table-column>
      <el-table-column prop="categoryName" label="套餐分类" ></el-table-column>
      <el-table-column prop="price" label="套餐价" ></el-table-column>
      <el-table-column label="售卖状态">
        <template slot-scope="scope">
          <div class="tableColumn-status" :class="{ 'stop-use': scope.row.status === 0}">
            {{ scope.row.status === 0? '停售' : '启售' }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="updateTime" label="最后操作时间"></el-table-column>
      <el-table-column label="操作" align="center" width="250px">
        <template slot-scope="scope">
          <el-button type="text" size="small"> 修改</el-button>
          <el-button type="text" size="small" @click="handleStartOrStop(scope.row)">
            {{ scope.row.status == '1' ? '停售' : '启售' }}
          </el-button>
          <el-button type="text" size="small" @click="handleDelete('S',scope.row.id)">删除</el-button>
          </template>
      </el-table-column>
      </el-table> 
      <el-pagination
      class="pageList"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>

  </div>
</template>

<script lang="ts">
import { getCategoryType } from '@/api/category'
import { getSetmealPage  } from '@/api/setMeal'
import { enableOrDisableSetmeal,deleteSetmeal  } from '@/api/setMeal'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      name: '',
      page: 1,
      pageSize: 10,
      total: 0,
      status: '',
      categoryId: '',
      records: [],
      options: [],
        value: '',
      saleStatusArr:[{
        value: '1',
        label: '在售'}
        ,{
        value: '0',
        label: '停售'
      }],
      multipleSelection: ''
       
    }
  },
  created() {
    getCategoryType({type: 2}).then(res=>{
       if(res.data.code === 1){
        this.options=res.data.data
       }
    }),
    this.pageQuery()

  },
  methods: {
    //分页参数
     pageQuery(){
      const params={
        page: this.page,
        pageSize: this.pageSize,
        name: this.name,
        categoryId: this.categoryId,
        status: this.status
     }
     getSetmealPage(params).then(res=>{
      if(res.data.code === 1){
        this.total=res.data.data.total
        this.records=res.data.data.records
       }
      })
     },
      //pageSize发生变化时触发
      handleSizeChange(pageSize){
        this.pageSize=pageSize
        this.pageQuery()
      },
      //page发生变化时触发
      handleCurrentChange(page){
        this.page=page
        this.pageQuery()
      },
      //起售或者停售
      handleStartOrStop(row){

        const p ={
            id : row.id,
            status: !row.status ? 1:0
          }


        this.$confirm('确定要修改套餐状态吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          enableOrDisableSetmeal(p).then(res=>{
            if(res.data.code){
              this.$message.success('套餐状态修改成功')
              this.pageQuery()
            }
          }).catch(err=>{
             this.$message.console.error('修改失败了:'+ err.message);
        })

        })

      },
      handleDelete(type: String,id: String){
        let param = ''

        this.$confirm('确定要删除指定的套餐吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          if(type == 'Batch'){//批量删除
          const array = new Array
          this.multipleSelection.forEach(element=>{//1,2,3
            array.push(element.id)
          })
          const ids = array.join(',')
          param = ids
        }else{//单一删除
          param = id
        }

        deleteSetmeal(param).then(res=>{
          if(res.data.code===1){
              this.$Message.success('删除成功')
              this.pageQuery()
          }else{
            this.$message.error(res.data.msg)
          }
        })

        })
      },
      handleSelectionChange(val){
        this.multipleSelection=val

      },
      handleAddSetMeal(){
        this.$router.push('/setmeal/add')
      }







  }
}
</script>
<style lang="scss">
.el-table-column--selection .cell {
  padding-left: 10px;
}
</style>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;

    .container {
      background: #fff;
      position: relative;
      z-index: 1;
      padding: 30px 28px;
      border-radius: 4px;

      .tableBar {
        margin-bottom: 20px;
        .tableLab {
          float: right;
          span {
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            padding: 0 20px;
            color: $gray-2;
          }
        }
      }

      .tableBox {
        width: 100%;
        border: 1px solid $gray-5;
        border-bottom: 0;
      }

      .pageList {
        text-align: center;
        margin-top: 30px;
      }
      //查询黑色按钮样式
      .normal-btn {
        background: #333333;
        color: white;
        margin-left: 20px;
      }
    }
  }
}
</style>
